<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div class="center_bottom">
    <div id="ezuikit-player-lidar"></div>
  </div>
</template>

<script>
import moment from "moment/moment";
import axios from "axios";
import qs from "qs";

export default {
  data() {
    return {
      UIKit:null
    };
  },
  created() {

  },
  mounted() {
    setTimeout(()=>{
      this.getData();
    },3000)
  },
  methods: {
    async getData() {
      let themeData = {
        "header": {
          "color": "#1890ff",
          "activeColor": "#FFFFFF",
          "backgroundColor": "#000000",
          "btnList": [
            // {
            //   "iconId": "deviceID",
            //   "part": "left",
            //   "defaultActive": 0,
            //   "memo": "顶部设备序列号",
            //   "isrender": 1
            // },
            // {
            //   "iconId": "deviceName",
            //   "part": "left",
            //   "defaultActive": 0,
            //   "memo": "顶部设备名称",
            //   "isrender": 1
            // },
            // {
            //   "iconId": "cloudRec",
            //   "part": "right",
            //   "defaultActive": 0,
            //   "memo": "云存储",
            //   "isrender": 0
            // },
            // {
            //   "iconId": "rec",
            //   "part": "right",
            //   "defaultActive": 0,
            //   "memo": "SD卡回放",
            //   "isrender": 0
            // }
          ]
        },
        "footer": {
          "color": "#FFFFFF",
          "activeColor": "#1890FF",
          "backgroundColor": "#00000021",
          "btnList": [
            {
              "iconId": "sound",
              "part": "left",
              "defaultActive": 0,
              "memo": "声音按钮",
              "isrender": 1
            },
            {
              "iconId": "pantile",
              "part": "left",
              "defaultActive": 0,
              "memo": "云台控制按钮",
              "isrender": 1
            },
            {
              "iconId": "zoom",
              "part": "left",
              "defaultActive": 0,
              "memo": "电子放大",
              "isrender": 1
            },
            // {
            //   "iconId": "hd",
            //   "part": "right",
            //   "defaultActive": 0,
            //   "memo": "清晰度切换按钮",
            //   "isrender": 1
            // },
            {
              "iconId": "webExpend",
              "part": "right",
              "defaultActive": 0,
              "memo": "网页全屏按钮",
              "isrender": 1
            },
            // {
            //   "iconId": "expend",
            //   "part": "right",
            //   "defaultActive": 0,
            //   "memo": "全局全屏按钮",
            //   "isrender": 1
            // }
          ]
        }
      };

      const videoUrl = await axios.post(`https://open.ys7.com/api/lapp/v2/live/address/get`,
      new URLSearchParams({
        accessToken: this.$store.state.setting.accessToken,
        deviceSerial: "BA1581481",
        channelNo: 1,
      }),{
        "Content-Type": "application/x-www-form-urlencoded",
      })

      this.UIKit = new EZUIKit.EZUIKitPlayer({
        id: `ezuikit-player-lidar`,
        autoplay: true,  // 默认播放
        url: videoUrl.data.url,
        accessToken: this.$store.state.setting.accessToken,
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        width: 463,
        height: 260,
        themeData: themeData
      })
    },
    browserFullscreen(){
      console.log("放大")
      this.UIKit.browserFullscreen();
    }
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>
